<template>
    <div>
        <el-descriptions :column="2" border>
            <template slot="extra">
                <el-button size="small">取消</el-button>
                <el-button type="primary" size="small">保存</el-button>
            </template>

            <el-descriptions-item v-for="item in descItems" :key="item.index">
                <template slot="label">
                    {{ item.label }}
                </template>

                <div style="width: 100%">
                    <div v-show="item.isActive">
                        <div v-if="item.type === 'text'">{{ form[item.prop] }}</div>
                        <el-input @blur="item.isActive = false" v-model="form[item.prop]"
                            v-else-if="item.type === 'input'"></el-input>

                        <el-date-picker @blur="item.isActive = false" v-else-if="item.type === 'date'"
                            v-model="form[item.prop]" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd">
                        </el-date-picker>

                        <el-select @blur="item.isActive = false" v-else-if="item.type === 'select' && !item.multiple"
                            v-model="form[item.prop]" placeholder="请选择">
                            <el-option v-for="e in item.options" :key="e.value" :label="e.label" :value="e.value">
                            </el-option>
                        </el-select>

                        <el-select :popper-append-to-body="false" @visible-change="(ev) => !ev ? item.isActive = false : ''"
                            @blur=" item.isActive = false" v-else-if="item.type === 'select' && item.multiple"
                            v-model="form[item.prop]" placeholder="请选择" :multiple="item.multiple">
                            <el-option v-for="e in item.options" :key="e.value" :label="e.label" :value="e.value">
                            </el-option>
                        </el-select>
                    </div>

                    <div v-show="!item.isActive" @click="item.isActive = true">
                        {{ form[item.prop] }}
                    </div>
                </div>
            </el-descriptions-item>
            <!-- 合并行 -->
            <el-descriptions-item :span="2">
                <template slot="label"> 合同重大风险点 </template>
                <div style="width: 100%" class="mytext">

                    <el-input type="textarea" :rows="3" v-show="isActive1" @blur="isActive1 = false"
                        v-model="form.prop100"></el-input>
                    <div v-show="!isActive1" @click="isActive1 = true">
                        {{ form.prop100 }}
                    </div>
                </div>
            </el-descriptions-item>
            <!-- 合并行 -->
            <el-descriptions-item :span="2">
                <template slot="label"> 项目主要盈利点 </template>
                <div style="width: 100%">项目主要盈利点</div>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            selectList: [
                { label: '选项一', value: '0' },
                { label: '选项二', value: '1' },
            ],
            selectedOptions: [],
            isShow: 'text',
            val1: [],
            descItems: [
                {
                    label: '业主简称',
                    prop: 'prop1',
                    type: 'text',
                    isActive: false,
                },
                {
                    label: '合同全称',
                    prop: 'prop2',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '业主性质',
                    prop: 'prop3',
                    type: 'datetime', //单选
                    isActive: false,
                    value1: '',
                },
                {
                    label: '合同模式',
                    prop: 'prop4',
                    type: 'select', //
                    isActive: false,
                    options: [
                        {
                            label: '施工总承包',
                            value: '施工总承包'
                        },
                        {
                            label: 'EPC',
                            value: 'EPC'
                        },
                    ]
                },
                {
                    label: '项目性质',
                    prop: 'prop5',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '合同体量',
                    prop: 'prop6',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '签约合同额',
                    prop: 'prop7',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '中标时间',
                    prop: 'prop8',
                    type: 'date',
                    isActive: false,
                },
                {
                    label: '补充协议合同总额',
                    prop: 'prop9',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '合同开工时间',
                    prop: 'prop10',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '累计合同额',
                    prop: 'prop11',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '合同完工时间',
                    prop: 'prop12',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '成本责任上缴',
                    prop: 'prop13',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '合同工期',
                    prop: 'prop14',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: 'A值',
                    prop: 'prop15',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '实际开工时间',
                    prop: 'prop16',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: 'B值',
                    prop: 'prop17',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '预计完工时间',
                    prop: 'prop18',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '投标利润率（无税）',
                    prop: 'prop19',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '实际工期',
                    prop: 'prop20',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '主合同评审利润率（无税）',
                    prop: 'prop21',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '第一次商务策划利润率（无税）',
                    prop: 'prop22',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '预期利润额',
                    prop: 'prop23',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '计价方式',
                    prop: 'prop24',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '付款条件',
                    prop: 'prop25',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '付款比例',
                    prop: 'prop26',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '付款周期',
                    prop: 'prop27',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '支付方式',
                    prop: 'prop28',
                    type: 'select',
                    isActive: false,
                    multiple: true,
                    options: [
                        {
                            label: '现金',
                            value: '现金'
                        },
                        {
                            label: '银票',
                            value: '银票'
                        },
                        {
                            label: '发票',
                            value: '发票'
                        },
                    ]
                },
                {
                    label: '工期罚款',
                    prop: 'prop29',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '创优创奖要求',
                    prop: 'prop30',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '履约保证金',
                    prop: 'prop31',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '履约保证金方式',
                    prop: 'prop32',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '质保金',
                    prop: 'prop33',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '质保金返还期限',
                    prop: 'prop34',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '是否预付款',
                    prop: 'prop35',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '预付款比例',
                    prop: 'prop36',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '是否垫资',
                    prop: 'prop37',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '是否放弃优先受偿权',
                    prop: 'prop38',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '是否承接风险项目（市场归口）',
                    prop: 'prop39',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '工程类型（市场归口）',
                    prop: 'prop40',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '是否承接风险项目（市场归口）',
                    prop: 'prop41',
                    type: 'input',
                    isActive: false,
                },
                {
                    label: '是否承接风险项目（市场归口）',
                    prop: 'prop42',
                    type: 'input',
                    isActive: false,
                },
            ],
            descItems2: [
                {
                    label: '合同重大风险点',
                    prop: 'prop1',
                    type: 'textarea',
                    isActive: false,
                },
                {
                    label: '项目主要盈利点',
                    prop: 'prop2',
                    type: 'textarea',
                    isActive: false,
                },
            ],
            form: {
                prop1: 'qqq',
                prop2: 'www',
                prop3: 'eee',
                prop4: 'EPC',
                prop8: '2022-07-13',
                prop28: ['现金'],
                prop100: 'jsahsdlkf jksdfn dsjkfn sdknf ksdnf klsdmlf msddlf lk'
            },
            isActive1: false
        };
    },
    methods: {

    },
};
</script>
  
<style lang="scss" scoped>
::v-deep .el-descriptions-item__label {
    width: 20%;
}

::v-deep .el-descriptions__extra {
    height: 20px;
}

::v-deep .el-descriptions-item {
    line-height: 10px;
    /* 根据需要调整数值，这里设置表头和内容行的行高为40px */
}

::v-deep .el-input {
    height: 30px !important;
    line-height: 30px;
}

::v-deep .el-input__inner {
    height: 35px !important;
}

::v-deep .el-descriptions-item__cell {
    width: 220px;
    height: 56px;
}

.mytext textarea {
    white-space: pre-wrap; //保留所有空格
}
</style>